<template>
  <el-dialog :model-value="show" title="分配角色" @close="$emit('close')">
    <el-form ref="formRef" :form="form">
      <el-form-item label="角色名称" props="name">
        <el-input
          autocomplete="off"
          placeholder="请输入角色名称"
          v-model="form.name"
      /></el-form-item>
      <el-form-item label="描述" props="description">
        <el-input
          :rows="4"
          type="textarea"
          autocomplete="off"
          placeholder="请输入描述"
          v-model="form.description"
        />
      </el-form-item>
      <el-form-item label="是否启用">
        <el-radio-group class="ml-4">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button>取消</el-button>
        <el-button type="primary" @click="confirm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { emit } from "process";
import { reactive } from "vue";
import { addRoleApi } from "./api/api";

defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["close"]);
const form = reactive<RoleList>({
  name: "",
  description: "",
  status: 0,
});
// 确定
const confirm = () => {
  addRoleApi(form).then((res) => {
    if (res.code === 200) {
      ElMessage.success("添加成功");
      emit("close", true);
    }
  });
};
</script>

<style></style>
